<template>
  <div class="app-container">
    <!-- <app-header> </app-header> -->
    <div class="app-main">
      <div class="progress-bar">
        <img src="@/assets/images/apply/progress-bar1.png" alt="" />
      </div>
      <label class="input-box">
        <i class="icon user"></i>
        <mt-field
          type="text"
          placeholder="请输入借款人的姓名"
          v-model="userName"
          class="input"
          v-hint-emoji
        ></mt-field>
      </label>
      <label class="input-box">
        <i class="icon idCard"></i>
        <mt-field
          type="text"
          placeholder="请输入身份证号"
          v-model="idCard"
          class="input"
          v-hint-emoji
          :attr="{ maxlength: 18 }"
        ></mt-field>
      </label>
      <label class="input-box">
        <i class="icon mobile"></i>
        <mt-field
          type="tel"
          placeholder="请输入手机号"
          v-model="mobile"
          class="input"
          :attr="{ maxlength: 11 }"
        ></mt-field>
      </label>
      <label class="input-box" v-show="!smsCodeHide">
        <i class="icon smsCode"></i>
        <mt-field
          type="number"
          placeholder="请输入验证码"
          v-model="smsCode"
          class="input input-smsCode"
          :attr="{ oninput: 'this.value = this.value.slice(0,6)' }"
        ></mt-field>
        <button
          class="btn-sms"
          @click="countDown()"
          :disabled="countSec != countSec_default"
        >
          {{ countSec == countSec_default ? "获取验证码" : countSec + "s" }}
        </button>
      </label>
      <!-- <label class="input-box">
        <i class="icon recommend"></i>
        <mt-field
          type="text"
          placeholder="请输入推荐码(选填)"
          v-model="recommendCode"
          class="input"
          v-hint-emoji
        ></mt-field>
      </label> -->
      <div class="desc">
        <img src="@/assets/images/common/warn.png" alt="" />
        <span>请填写借款人的真实姓名和身份证号.</span>
      </div>
      <div class="btns">
        <button
          class="btn btn-primary btn-apply"
          :disabled="btnDisable"
          @click="apply()"
        >
          开始申请
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { countDown } from "@/utils";
import { validMobile, validIdCard } from "@/utils/validate";
import { apply1ToQuerySmsCode, apply1ToApply } from "@/api/customer";
const countSec_default = 61;
export default {
  name: "apply1",
  data() {
    return {
      userName: "",
      idCard: "",
      mobile: "",
      smsCode: "",
      recommendCode: "",
      countSec_default: countSec_default,
      countSec: countSec_default
    };
  },
  computed: {
    smsCodeHide() {
      return this.mobile === this.$store.getters["user/mobile"] ? true : false;
    },
    btnDisable() {
      return !(
        this.userName &&
        this.idCard &&
        this.mobile &&
        (this.smsCodeHide || this.smsCode)
      );
    }
  },
  created() {
    this.mobile = this.$store.getters["user/mobile"];
    this.recommendCode = this.$store.getters["user/recommendCode"];
  },
  methods: {
    /* 倒计时 */
    countDown() {
      if (!this.mobile) {
        this.$messagebox.alert("请输入手机号码");
        return;
      }
      if (!validMobile(this.mobile)) {
        this.$messagebox.alert("无效的手机号码");
        return;
      }
      apply1ToQuerySmsCode({
        phone: this.mobile
      }).then(res => {
        if (res.respCode === "000000") {
          // this.$messagebox.alert(res.respMsg);
          countDown.call(this, "countSec", countSec_default, 1000);
        }
      });
    },
    /* 申请 */
    apply() {
      if (!validIdCard(this.idCard)) {
        this.$messagebox.alert("无效的身份证号码");
        return;
      }
      if (!validMobile(this.mobile)) {
        this.$messagebox.alert("无效的手机号码");
        return;
      }
      apply1ToApply({
        userName: this.userName,
        userIdNum: this.idCard,
        debitPhone: this.mobile,
        smscode: this.smsCode
        // referrer: this.recommendCode
      }).then(res => {
        if (res.respCode === "000000") {
          /* 申请成功 */
          window.sessionStorage.setItem("orderId", res.params.propertyNumber);
          this.$router.push({ name: "apply2" });
        } else if (res.respCode === "0004012") {
          /* 身份信息异常 */
          this.$messagebox({
            message: "您填写的身份信息异常,请确认填写的是真实姓名和身份证号！",
            showConfirmButton: true,
            // showCancelButton: true,
            confirmButtonText: "重新填写"
            // cancelButtonText: "取消"
          }).then(res => {
            if (res === "confirm") {
              // this.userName = "";
              // this.idCard = "";
            }
          });
        } else if (res.respCode === "000488") {
          window.sessionStorage.setItem("orderId", res.params.propertyNumber);
          /* 有一个申请单未完成 */
          this.$messagebox({
            message: "您有一笔押好贷申请尚未完成,是否要继续完成！",
            showConfirmButton: true,
            showCancelButton: true,
            confirmButtonText: "继续",
            cancelButtonText: "取消"
          }).then(res => {
            if (res === "confirm") {
              this.$router.push({ name: "apply2" });
            }
          });
        } else if (res.respCode === "000489") {
          window.sessionStorage.setItem("orderId", res.params.propertyNumber);
          /* 有一个申请未完成审批 */
          this.$messagebox({
            message: "您有一笔押好贷申请尚未完成审批,不能重复申请,请耐心等待！",
            showConfirmButton: true,
            showCancelButton: true,
            confirmButtonText: "查看",
            cancelButtonText: "取消"
          }).then(res => {
            if (res === "confirm") {
              this.$router.push({ path: "/tab/2" });
            }
          });
        } else {
          this.$messagebox.alert(res.respMsg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$color-border: #ccc;
$margin-lr: 0.15rem;


.app-main {
  .progress-bar {
    width: 100%;
    height: 0.48rem;
    display: flex;
    align-items: center;
    padding: 0 $margin-lr;
    border-bottom: 1px solid $color-border;
    img {
      width: 100%;
      height: 0.2rem;
    }
  }
  .input-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.45rem;
    border-bottom: 1px solid $color-border;
    background-color: #fff;
    i.icon {
      width: 0.44rem;
      height: 100%;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 0.22rem;
        height: 0.22rem;
      }
      &.user::after {
        background-image: url("~@/assets/images/apply/user.png");
      }
      &.idCard::after {
        background-image: url("~@/assets/images/apply/idcard.png");
      }
      &.mobile::after {
        background-image: url("~@/assets/images/common/mobile.png");
      }
      &.smsCode::after {
        background-image: url("~@/assets/images/common/smscode.png");
      }
      &.recommend::after {
        background-image: url("~@/assets/images/apply/recommend.png");
      }
    }
    .input {
      flex: 1;
      height: 100%;
      background-color: transparent;
      /deep/ input {
        font-size: 0.15rem;
      }
      &.input-smsCode {
        width: 1.2rem;
        flex: none;
      }
    }
    .btn-sms {
      $color: #4f8be8;
      $height: 0.24rem;
      width: 0.86rem;
      height: $height;
      border-radius: $height;
      color: $color;
      border: 1px solid $color;
      font-size: 0.12rem;
      text-align: center;
    }
  }
  .desc {
    display: flex;
    align-items: center;
    margin: 0.1rem $margin-lr;
    margin-bottom: 0;
    font-size: 0.12rem;
    color: #999;
    img {
      width: 0.17rem;
      height: 0.17rem;
      margin-right: 0.05rem;
    }
  }
  .btns {
    margin: 0.3rem $margin-lr;
    height: 0.42rem;
    .btn-apply {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
